<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>个人主页</title>
    <include file="public@head" />
    <link rel="stylesheet" href="__TMPL__public/assets/css/star.css"/>
    <style>
        ul.gift_list{
            width: 544px;
            margin: 14px auto;
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }
        ul.gift_list{
            margin-top: 30px;
        }
        ul.gift_list li{
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #666;
            border-top: 1px solid #ccc;
        }
        ul.gift_list li.title{
            background: #f5f5f5;
            color: #999;
        }

        ul.gift_list li span{
            display: inline-block;
            width: 25%;
            height: 40px;
            float: left;
            border-left: 1px solid #ccc;
            /*border-top: 1px solid #ccc;*/
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<include file="public@starnav" />


<div class="center starPageWrapper clearfix">
    <div class="fl leftBox">
        <div class="sp_top clearfix">
            <div id="sp_info_wra" class="fl">
               <!-- <img class="sp_back_pic" src="__TMPL__public/assets/img/star.jpg" alt="背景图片">
                <span class="sp_shade"></span>
                <span id="sp_lsid">LSID：293968</span>
                <div id="sp_info_base">
                    <div id="sp_head_wra" class="fl">
                        <img class="sp_head" src="__TMPL__public/assets/img/star.jpg" alt="">
                        &lt;!&ndash;<a class="focus_btn fr" href="javascript:void(0)"><i class="ic_follow"></i>关注</a>&ndash;&gt;
                    </div>
                    <div class="sp_text_wra fl">
                        <h4 class="sp_name">刘诗诗</h4>
                        <div class="sp_label">
                            <span>歌手</span><span>演员</span>
                        </div>
                        <div class="sp_popular">
                            <span>被关注：<i>223</i></span><span>人气：<i>323332</i></span>
                        </div>
                    </div>
                </div>-->
            </div>
            <ul class="sp_list_btn fl">
                <li class="live-flag"><a class="displayNone" href="javascript:void(0)">正在直播<span class="arrow_r fr"></span></a></li>
                <li class="modify_btn"><a href="modify.html">修改资料<span class="arrow_r fr"></span></a></li>
            </ul>
        </div>
        <div class="layui-tab layui-tab-brief" lay-filter="tab_star">
            <ul class="layui-tab-title">
                <li class="layui-this">回放</li>
                <li>我的账户</li>
                <li>商家合作</li>
                <li>送礼</li>
                <li>星档案</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div id="spBackWra" class="sp_back_wra clearfix">

                    </div>
                </div>
                <div class="layui-tab-item">
                    <div id="account-info">


                    </div>
                </div>
                <div class="layui-tab-item">
                    <div id="business-sponsor">
                        <p class="tips">为您推送的商家均已经经过官方核实资质，请放心合作</p>
                        <ul class="business-list">
                            <li>
                                <div class="fl">
                                    <b>京东商城</b>
                                    <p>客服电话：21231322</p>
                                </div>
                                <span class="fr">06.14-13:12</span>
                            </li>
                            <li>
                                <div class="fl">
                                    <b>京东商城</b>
                                    <p>客服电话：21231322</p>
                                </div>
                                <span class="fr">06.14-13:12</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div id="sp_gift_wra" class="layui-tab layui-tab-brief" lay-filter="tab_gift">
                        <ul class="gift_list">

                        </ul>
                        <!--<ul class="layui-tab-title">
                            <li class="layui-this">发出的红包</li>
                            <li>送出的礼品</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <ul class="sp_money_list">

                                </ul>
                            </div>
                            <div class="layui-tab-item">
                                <ul class="sp_actual_list">

                                </ul>
                            </div>
                        </div>-->
                    </div>
                </div>
                <div class="layui-tab-item">
                    <ul class="sp_profile_wra">

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="fr rightBox">
        <div class="guardTitle clearfix">
            <h4 class="fl">守护排行榜<span class="tips">（前20名）</span></h4>
            <b class="page_next fr"></b>
            <b class="page_prev fr"></b>
            <b class="page_len fr">1/2</b>
        </div>
        <ul class="guardWrapper" style="">

        </ul>
    </div>
</div>

<include file="public@footer" />
<include file="public@starscripts" />
<script>
    iService.headerMove(7);
    $(function(){
        function getQueryString(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return decodeURI(unescape(r[2]));
            }
            return null;
        }
        var u_sid = iService.getQueryString("u_sid");
        var u_name = iService.getQueryString("u_name");

        $(".secret_btn").on("click",function(){
            window.location.href = "../Message/starSecret.html?u_sid="+u_sid+"&u_name="+u_name;
        });

        $(".leave_btn").on("click",function(){
            window.location.href = "../Message/starLeave.html?u_sid="+u_sid+"&u_name="+u_name;
        });

        //回放列表
        function get_playBack(){

            /*layui.use('flow', function(){
             var flow = layui.flow;
             //当你执行这样一个方法时，即对页面中的全部带有lay-src的img元素开启了懒加载（当然你也可以指定相关img）
             flow.lazyimg();
             });*/

            layui.use('flow', function(){
                var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
                var flow = layui.flow;
                flow.load({
                    elem: '#spBackWra' //指定列表容器
                    ,isAuto:false
                    ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                        var lis = [];
                        //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                        var playback_param = {
                            url:'Homes/playBack',
                            data:{
                                suid:localStorage.udid,
                                page:page
                            }
                        };
                        $.JsonRpc(playback_param,function(data){
                            var playback_data = data.data.list;
                            layui.each(playback_data, function(index, item){
                                var listBoxClass = "";
                                if((index+1)%2==0){
                                    listBoxClass = "tripleBox"
                                }

                                var tpl =
                                        '<div class="listBox '+listBoxClass+'">'+
                                        '<div class="listPic">'+
                                        '<a href="#">'+
                                        '<img src="'+playback_data[index].s_image+'" alt="">'+
                                        '<p class="time">回放</p>'+
                                        '<span class="play_layer"><i></i></span>'+
                                        '</a>'+
                                        '</div>'+
                                        '<div class="list_user_info clearfix">'+
                                        '<span class="fl list_user_name">'+playback_data[index].s_name+'</span>'+
                                        '<p class="fr num">'+
                                        '<span>'+playback_data[index].l_viewing+'</span>'+
                                        '<i></i>'+
                                        '</p>'+
                                        '</div>'+
                                        '</div>';
                                lis.push(tpl);
                            });

                            next(lis.join(''), page < Math.ceil(data.data.num/20));


                            var listPic = $("#spBackWra .listPic");
                            listPic.hover(function(){
                                $(this).find(".play_layer").stop().show();
                                //$(this).find("img").animate({width:"340px"});
                                $(this).find("img").addClass("big")
                            },function(){
                                $(this).find(".play_layer").stop().hide();
                                //$(this).find("img").animate({width:"340px"});
                                $(this).find("img").removeClass("big")

                            });


                        });
                    }
                });
            });

        }
        //红包
        function get_package(){
            var send_param = {
                url:'Records/sendList',
                data:{
                    suid:u_sid,
                    type:10,
                }
            };
            $.JsonRpc(send_param,function(data){
                var send_data = data.data.list;
                var tpl="";
                $.each(send_data,function(k){
                    var img_bg='<img src="/themes//Public/assets/img/logo.png" alt="">';
                    if(send_data[k].l_image){
                        img_bg = '<img onerror="iService.imgNoFind(this)" src="'+send_data[k].l_image+'" alt="">';
                    }
                    tpl +=
                            '<li class="clearfix">'+
                            '<div class="sp_money_info fl">'+
                            '<p class="sp_money_date">'+send_data[k].i_createtime.slice(0,16).replace(/-/g,".").replace(/ /,"-")+'</p>'+
                            '<div class="sp_money_amount">'+
                            '<img src="/themes//Public/assets/img/icon_redPack.png" alt="">'+
                            '<span>'+Math.floor(send_data[k].money*100)/100+'L币</span>'+
                            '</div>'+
                            '</div>'+
                            '<a class="sp_star_play fr" href="##">'+
                            img_bg+
                            '<i></i>'+
                            '</a>'+
                            '</li>';
                });
                $(".sp_money_list").html(tpl);
            });
        }
        //账户信息
        function get_account_info(){
            var account_param = {
                url:'Stars/account',
                data:{
                }
            };
            $.JsonRpc(account_param,function(data){
                var tpl =
                    '<div class="remain">'+
                        '<b>'+data.data.u_balance+'</b><span>账户余额</span>'+
                    '</div>'+
                    '<div class="income">'+
                        '<b>'+data.data.u_obtain+'</b><span>总收入</span>'+
                    '</div><div class="payout">'+
                        '<b>'+data.data.u_use+'</b><span>发红包</span>'+
                    '</div>';
                $("#account-info").html(tpl);
            });
        }
        //合作商家
        function get_sponsor_info(){
            var sponsor_param = {
                url:'Stars/business',
                data:{
                }
            };
            $.JsonRpc(sponsor_param,function(data){
                var tpl = "";
                data = data.data;
                $.each(data,function(i){
                    tpl +=
                        '<li>'+
                        '<div class="fl">'+
                        '<b>京东商城</b>'+
                        '<p>客服电话：'+data[i].g_phone+'</p>'+
                        '</div>'+
                        '<span class="fr">'+iService.timeFormat(data[i].g_edittime)+'</span>'+
                        '</li>';
                });
                $(".business-list").html(tpl);
            });

        }
        //礼品
        function get_gift(){
            var send_param = {
                url:'Records/sendList',
                data:{
                    suid:localStorage.udid,
                    type:20,
                    page:1
                }
            };
            $.JsonRpc(send_param,function(data){
                var send_data = data.data.list;
                if(!send_data.length){
                    var tpl = '<p class="null-tips-wrap">没有更多了</p>';
                    $(".gift_list").html(tpl).css('border','none');
                    return false;
                }
                var tpl=
                        '<li class="title">'+
                            '<span>商家</span>'+
                            '<span>礼品</span>'+
                            '<span>数量</span>'+
                            '<span>时间</span>'+
                        '</li>';
                $.each(send_data,function(k){
                    var send_date = send_data[k].i_createtime.split("-");
                    var o_createtime = send_data[k].i_createtime.substr(0,16).replace(/-/g,".").replace(/ /g,"-");
                    tpl+=
                        '<li>'+
                        '<span>'+send_data[k].g_sponsor+'</span>'+
                        '<span>'+send_data[k].g_name+'</span>'+
                        '<span>'+send_data[k].i_number+'</span>'+
                        '<span>'+o_createtime+'</span>'+
                        '</li>';
                });
                $(".gift_list").html(tpl);
            });
        }
        //动态列表
        function get_circles(){
            layui.use('flow', function(){
                var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
                var flow = layui.flow;
                flow.load({
                    elem: '.sp_dynamic_wra' //指定列表容器
                    ,isAuto:false
                    ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                        var lis = [];
                        //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                        var myCircle_param = {
                            url:'Circles/circleList',
                            data:{
                                page:page
                            }
                        };
                        $.JsonRpc(myCircle_param,function(data){
                            var star_list_data = data.data.list;
                            layui.each(star_list_data, function(index, item){
                                var likeClassName = "";
                                (star_list_data[index].booked==10)?likeClassName = "active":likeClassName = "";
                                var creat_time = star_list_data[index].c_createtime.slice(0,15);
                                var img_all = "";
                                if(star_list_data[index].c_images) {
                                    var img_arr = String(star_list_data[index].c_images).split(",");
                                    for(var i=0;i<img_arr.length;i++){
                                        img_all += '<a href="../Circle/detail.html?cid='+star_list_data[index].cid+'"><img src="'+img_arr[i]+'" alt=""></a>';
                                    }
                                }
                                var tpl =
                                        '<div class="sc_list_box" id="cid'+star_list_data[index].cid+'">'+
                                        '<div class="sc_title clearfix">'+
                                        '<a href="../Page/index.html?u_sid='+star_list_data[index].c_udid+'"><img class="star_img fl" src="'+star_list_data[index].u_avatar+'" alt=""></a>'+
                                        '<div class="fl">'+
                                        '<h4 class="star_name">'+star_list_data[index].u_nickname+'</h4>'+
                                        '<p class="star_publish_time">'+creat_time+'</p>'+
                                        '</div>'+
                                        '</div>'+
                                        '<p class="star_publish_txt"><a href="../Circle/detail.html?cid='+star_list_data[index].cid+'">'+star_list_data[index].c_content+'</a></p>'+
                                        '<div class="imgWra clearfix">'+
                                        img_all+
                                        '</div>'+
                                        '<ul class="sc_row_line clearfix">'+
                                        '<li>'+
                                        '<span class="c_like">'+star_list_data[index].c_like+'</span>'+
                                        '<i class="ic_praise '+likeClassName+'" data-cid="'+star_list_data[index].cid+'"></i>'+
                                        '</li>'+
                                        '<li>'+
                                        '<span>'+star_list_data[index].c_comment+'</span>'+
                                        '<i class="ic_comment"></i>'+
                                        '</li>'+
                                        '<li>'+
                                        '<span>'+star_list_data[index].c_share+'</span>'+
                                        '<i class="ic_share"></i>'+
                                        '</li>'+
                                        '</ul>'+
                                        '</div>';
                                lis.push(tpl);
                            });
                            next(lis.join(''), page < Math.ceil(data.data.num/20));
                            //点赞帖子
                            $(".ic_praise").off("click").on("click",function(){
                                var ic_prize_now = $(this);
                                var cid = $(this).data("cid");
                                var praise_param = {
                                    url:'Circles/likeCircle',
                                    data:{
                                        cid: cid
                                    }
                                };
                                $.JsonRpc(praise_param,function(data){
                                    if(data.code==200){
                                        if(data.data.status==10){
                                            ic_prize_now.addClass('layui-anim layui-anim-scaleSpring active');
                                            ic_prize_now.siblings(".c_like").html(data.data.number);
                                        }else if(data.data.status==20){
                                            ic_prize_now.removeClass('layui-anim layui-anim-scaleSpring active');
                                            ic_prize_now.siblings(".c_like").html(data.data.number);
                                        }
                                    }
                                })
                            });
                            $(".sg_list_wra").on("mouseover mouseout",".btn_cancel",function(event){
                                if(event.type == "mouseover"){
                                    $(this).html("取消关注");
                                }else if(event.type == "mouseout"){
                                    $(this).html("已关注");
                                }
                            });
                        });
                    }
                });
            });
        }
        //明星档案
        function get_resume(){
            var resume_param = {
                url:'Homes/resume',
                data:{
                    suid:localStorage.udid
                }
            };
            $.JsonRpc(resume_param,function(data){
                var data_resume = data.data;
                var tpl = "";
                tpl +=
                        '<li class="clearfix">'+
                        '<span class="fl">中文名</span>'+
                        '<p class="fl">'+data_resume.s_name+'</p>'+
                        '</li>'+
                        '<li class="clearfix">'+
                        '<span class="fl">粉丝名</span>'+
                        '<p class="fl">'+data_resume.u_nickname+'</p>'+
                        '</li>'+
                        '<li class="clearfix">'+
                        '<span class="fl">星座</span>'+
                        '<p class="fl">'+data_resume.s_astro+'</p>'+
                        '</li>'+
                        '<li class="clearfix">'+
                        '<span class="fl">出生地</span>'+
                        '<p class="fl">'+data_resume.s_born+'</p>'+
                        '</li>'+
                        '<li class="clearfix">'+
                        '<span class="fl">代表作品</span>'+
                        '<p class="fl">'+data_resume.s_works+'</p>'+
                        '</li>'+
                        '<li class="clearfix">'+
                        '<span class="fl">主要成就</span>'+
                        '<p class="fl">'+data_resume.s_record+
                        '</p>'+
                        '</li>';
                $(".sp_profile_wra").html(tpl);
            });
        }
        layui.use('element', function(){
            var element = layui.element();
            //一些事件监听
            element.on('tab(tab_star)', function(data){
                //Tab切换请求数据
                switch(data.index)
                {
                    case 0:
                        get_playBack();
                        break;
                    case 1:
                        get_account_info();
                        break;
                    case 2:
                        get_sponsor_info();
                        break;
                    case 3:
                        get_gift();
                        break;
                    case 4:
                        get_resume();
                        break;
                    default:
                        console.log("Error");
                }

            });
        });

        var starPage_param = {
            url:'Homes/star',
            data:{
                suid:localStorage.udid
            }
        };
        $.JsonRpc(starPage_param,function(data){
            (data.data.live==3)?$(".sp_list_btn ．live-flag").children("a").removeClass("displayNone"):"";
            var star_info = data.data.star;
            localStorage.s_backdrop = star_info.s_backdrop;
            var tpl =
                    '<img class="sp_back_pic" src="'+star_info.s_backdrop+'" alt="背景图片">'+
                    '<span class="sp_shade"></span>'+
                    '<span id="sp_lsid">LSID：'+data.content.suid+'</span>'+
                    '<div id="sp_info_base">'+
                    '<div id="sp_head_wra" class="fl">'+
                    '<img class="sp_head" src="'+star_info.u_avatar+'" alt="">';
            tpl +=
                //'<a class="focus_btn fr" href="javascript:void(0)"><i class="ic_follow"></i>关注</a>'+
                    '</div>'+
                    '<div class="sp_text_wra fl">'+
                    '<h4 class="sp_name">'+star_info.s_name+'</h4>'+
                    '<div class="sp_label">'+
                    '<span>'+star_info.s_musictype +'</span>' +
                        //'<span>演员</span>'+
                    '</div>'+
                    '<div class="sp_popular">'+
                        //'<a data-s_status="20" data-sid="19" class="focus_btn btn_confirm fr" href="javascript:void(0)">关注</a>'+
                    '<span>被关注：<i>'+star_info.s_booked+'</i></span><span>人气：<i>'+star_info.u_obtain+'</i></span>'+
                    '</div>'+
                    '</div>'+
                    '</div>';
            $("#sp_info_wra").html(tpl);
            //守护列表
            var getGuardData = function(){
                var guard_param = {
                    url:'Homes/guard',
                    data:{
                        suid:localStorage.udid,
                        page:1
                    }
                };
                $.JsonRpc(guard_param,function(data){
                    data = data.data.list;
                    var le = data.length;
                    var tpl1 = "";
                    var tpl2 = "";
                    var top_class_name;
                    $(".guardTitle  .tips ").html('(前'+le+'名)');
                    if(le<=10){
                        $(".guardTitle .page_len ").html('1/1');
                        for(var i= 0;i<le;i++){
                            (i<3)?top_class_name = "fans_top_three":top_class_name = "";
                            tpl1 +=
                                    '<li>'+
                                    '<span class="fl fans_rank '+top_class_name+'">'+(parseInt(i)+1)+'</span>'+
                                    '<img class="fl fans_head" src="'+data[i].u_avatar+'" alt=""/>'+
                                    '<h4 class="fl fans_name">'+data[i].u_nickname+'</h4><span class="user_leval_mark fans_leval user_leval_'+iService.get_user_leval(data[i].u_score)+'"></span>'+
                                    '<span class="fr fans_lb_num">'+data[i].money+'L币</span>'+
                                    '</li>';
                        }
                        $(".guardWrapper").html(tpl1);
                    }else if(le>10){
                        $(".guardTitle .page_len ").html('1/2');
                        for(var k=0;k<le;k++){
                            (k<3)?top_class_name = "fans_top_three":top_class_name = "";
                            if(k<10){
                                tpl1 +=
                                        '<li>'+
                                        '<span class="fl fans_rank '+top_class_name+'">'+k+'</span>'+
                                        '<img class="fl fans_head" src="'+data[k].u_avatar+'" alt=""/>'+
                                        '<h4 class="fl fans_name">'+data[k].u_nickname+'</h4><span class="user_leval_mark fans_leval user_leval_'+iService.get_user_leval(data[k].u_score)+'"></span>'+
                                        '<span class="fr fans_lb_num">'+data[k].money+'L币</span>'+
                                        '</li>';
                            }else {
                                tpl2 +=
                                        '<li>'+
                                        '<span class="fl fans_rank">'+k+'</span>'+
                                        '<img class="fl fans_head" src="'+data[k].u_avatar+'" alt=""/>'+
                                        '<h4 class="fl fans_name">'+data[k].u_nickname+'</h4><span class="user_leval_mark fans_leval user_leval_'+iService.get_user_leval(data[k].u_score)+'"></span>'+
                                        '<span class="fr fans_lb_num">'+data[k].money+'L币</span>'+
                                        '</li>';
                            }
                        }
                        $(".guardWrapper").html(tpl1);
                        $(".page_next").on("click",function(){
                            $(".guardTitle .page_len ").html('2/2');
                            $(".guardWrapper").html(tpl2);
                        });
                        $(".page_prev").on("click",function(){
                            $(".guardTitle .page_len").html('1/2');
                            $(".guardWrapper").html(tpl1);
                        });
                    }
                    get_playBack();
                });
            };
            getGuardData();
        });
    });
</script>
</body>
</html>